<template>
  <el-dialog class="ImageReviewDialogWrapper" :visible.sync="dialogVisible" :title="title"
             :append-to-body="true">
    <!--suppress HtmlUnknownTarget -->
    <img v-if="trueUrl" width="100%" :src="trueUrl" alt="">
    <xum-hint content="没有图片" :visible="!trueUrl"/>
    <div slot="footer">
      <el-button @click="closeDialog" size="small">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getBase64 } from '@/utils/Utils'
import XumHint from '@/components/XumHint'

export default {
  name: 'ImageReviewDialog',
  components: { XumHint },
  props: {
    visible: {
      required: false,
      type: Boolean,
      default: false
    },
    title: {
      required: false,
      type: String,
      default: '查看图片'
    },
    url: {
      required: false,
      type: String,
      default: ''
    },
    file: {
      required: false,
      type: Object,
      default: null
    }
  },
  model: {
    event: 'visible',
    prop: 'visible'
  },
  data () {
    return {
      dialogVisible: false,
      base64: ''
    }
  },
  computed: {
    trueUrl () {
      return this.url || this.base64
    }
  },
  methods: {
    closeDialog () {
      this.dialogVisible = false
    }
  },
  watch: {
    visible (val) {
      this.dialogVisible = val
    },
    dialogVisible (val) {
      this.$emit('visible', val)
    },
    file (file) {
      getBase64(file).then(val => {
        this.base64 = val
      })
    }
  }
}
</script>

<style scoped lang="scss">
.ImageReviewDialogWrapper{

}
</style>
